<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <?php include("facebook_include.php");?>
    <?php
       $userName = getUserName();
       $userId = getUserId(); 
       $userFirstName = getUserFirstName();
       $userZipCode = getUserZipCode();
    ?>
    <title>Share A Walk</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script src="facebox/facebox.js"></script>
    
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA9k26g8XMhjW26puIcLupsBRBbvhE4ZnyWZrWL-s_bP6LnlCf_xS0mtQsuv4_V89DnPAqoqRqdCCiTQ" type="text/javascript"></script>
    <script src="mapHome.js" type="text/javascript"></script>
    <script src="globalFunctions.js" type="text/javascript"></script>
 	
    <link rel="stylesheet" type="text/css" href="stylesheets/tabs.css" />	
    <link rel="stylesheet" type="text/css" href="stylesheets/basic.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/home.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/scrollHorizontal.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/scrollButtons.css" />
    <link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
    
    <!-- Ratings -->
    <script type="text/javascript" language="javascript" src="ratings.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheets/ratings.css" />
    
    <!-- Facebook -->
      <link rel="stylesheet" href="http://static.ak.facebook.com/css/fb_connect.css" type="text/css" />
      <script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
      <script>
        function showfeed(walkName, walkDescription, walkLink, image) 
        {
          FB.ensureInit(function() 
          {
            var actionLinks = [{ "text": "Share A Walk", "href": 'http://apps.facebook.com/shareawalk'}];
            var attachment = 
            {
              'name':walkName,
              'href':walkLink,
              'caption':walkName,
              'description':walkDescription,
              'media':[{'type':'image','src':image,'href':walkLink}]
            };
            FB.Connect.streamPublish('', attachment,actionLinks);
          });
        }
          
        function eventInvite(walkName, walkDescription, walkLink, location, city)
        {
          FB.Connect.showPermissionDialog("create_event", function(perms) 
          {
            if (perms) 
            {
              var functionToCall = 'eventForm.php?walkName='+walkName+'&walkDescription='+walkDescription+'&walkLink='+walkLink+'&userName=<?php echo $userName?>&location='+location+'&city='+city ;
              jQuery.facebox({ ajax:functionToCall});
            }
          });
        }
          
      function printme(printID)
			{			
			  var src = document.getElementById("printSrc"+printID).value;
			  link = "about:blank";
			  var pw = window.open(link, "_new");
			  pw.document.open();
			  pw.document.write("<html><head><title>Temporary Printing Window</title><script>function step1(){ setTimeout('step2()', 10);} function step2() {window.print();window.close();}<\/script><\/head><body onLoad='step1()'><img src='" + src + "'><\/body><\/html>");
			  pw.document.close();
			}
		    
			/*function makepage(src)
			{
			  // We break the closing script tag in half to prevent
			  // the HTML parser from seeing it as a part of
			  // the *main* page.
        var returnValue = '';
        returnValue += "<html><head><title>Temporary Printing Window</title><script>function step1(){ setTimeout('step2()', 10);} function step2() {window.print();window.close();}<\/script><\/head><body onLoad='step1()'><img src='" + src + "'><\/body><\/html>";
			  return returnValue;
			}*/
      </script>
    <!-- /Facebook -->

    <script type="text/javascript" charset="utf-8">
      //Make sure the page has completely loaded before loading any jS
      jQuery.noConflict();
      var $j = jQuery;
      $j(function()
      {
        $j('a[rel*=facebox]').facebox() ;
        $j("div#scrollable1").scrollable();
		$j("div#scrollable2").scrollable();
		//$j("div#scrollable3").scrollable();
      });
    </script>
  </head>


  <body>
    <script type="text/javascript" src="wz_tooltip.js"></script>
    <div id="title"><h1>Share A Walk</h1></div>
    <div class="motivationInfo">
      <div id="badge" class="badge"></div>	
      <div id="visitsFavourites" class="visitsFavourites">
        <b>Hi <?php echo $userFirstName;?>!</b>
      </div>
    </div>


    <div id="header">
      <ul id="primary">
        <li><span>Walker Home</span></li>
        <li><a href="walks.php?id=0">Walks</a></li>
        <li><a href="profile.php">Walker Profile</a></li>
        <li><a href="help.php">Help</a></li>
      </ul>
    </div>
    <div id="main">
      <h4 style="margin-top:0px;margin-left:10px;margin-bottom:0px;color:#242424;">Walks near you!</h4>
      <div id="contents">
        <div class="locality">
          <!-- Walks near you 1 -->
			    <div class="walkInfo">
            <div id="title1" style="margin-top:10px;margin-left:10px;"></div>
            <div class="walkMap">
              <a id="walkPreviewLink1" href="#">
                <input id="walkPreview1" type="image" src="" width="180" height="180" name="submitButton"   />
              </a>
            </div>

						

						<div class="walkText">
              <div class="walkImages">
                <h5 style="margin-left:5px;">Photos along the walk<h5>
                <div>
                  <a class="prevPage browse left"></a>
                  <div id="scrollable1" class="scrollable">	
                    <div id="photos1" class="items"></div>
                  </div>
                  <a class="nextPage browse right"></a>
                  <br clear="all" />
                </div>
              </div>
              
              <div id="description1" class="description"></div>
              
              <div id="friendInfo1" class="friendInfo">
                Friends visited:10<br/>
                Friends favorited:10
              </div>
						
              <div id="tagInfo1" class="tagInfo"></div>
            </div>
          
            <div class="buttons">

            <!--  <button type="button" class="btn" id="invite" title="Set up an event to invite your friends for this walk !!"  rel="facebox"   onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);">Invite</button>-->

              <button type="button" class="btn" id="share1" title="Share this walk with your friends and let them also experience the joys of this walk!!" onClick="alert('hi');" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);">Share</button>
              <button type="button" class="btn" id="invite1" title="Set up an event to invite your friends for this walk !!"   rel="facebox" onClick="eventInvite();" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);">Invite</button>
              <button type="button" class="btn" id="print1" title="Print out the map of this walk!" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" onClick="printme('1');" >Print Map</button>
			  <input type="hidden" id="printSrc1" value="" />
            </div>
          </div>
          
          <!-- Walks near you 2 -->
          <div class="walkInfo">
            <div id="title2" style="margin-top:10px;margin-left:10px;"></div>
            <div class="walkMap">
              <a href="#" id="walkPreviewLink2">
                <input id="walkPreview2" type="image" src="" width="180" height="180" name="submitButton"   />
              </a>
            </div>
          
            <div class="walkText">
              <div class="walkImages">
                <h5 style="margin-left:5px;">Photos along the walk<h5>
                <div>
                  <a class="prevPage browse left"></a>
                  <div id="scrollable2" class="scrollable">	
                    <div id="photos2" class="items"></div>
                  </div>
                  <a class="nextPage browse right"></a>
                  <br clear="all" />
                </div>
              </div>
              
              <div id="description2" class="description"></div>
              
              <div id="friendInfo2" class="friendInfo">
                Friends visited:10<br/>
                Friends favorited:10
              </div>
						
              <div id="tagInfo2" class="tagInfo"></div>
            </div>
            <div class="buttons">
              <button type="button" class="btn" id="share2" title="Share this walk with your friends and let them also experience the joys of this walk!!" onMouseOver="this.style.textDecoration='underline';this.style.background='#6d84b4';" onMouseOut="this.style.textDecoration='none';this.style.background='#5c75aa';">Share</button>
              <button type="button" class="btn" id="invite2" title="Set up an event to invite your friends for this walk !!" onMouseOver="this.style.textDecoration='underline';this.style.background='#6d84b4';" onMouseOut="this.style.textDecoration='none';this.style.background='#5c75aa';">Invite</button>
              <button type="button" class="btn" id="print2" title="Print out the map of this walk!" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" onClick="printme('2');" >Print Map</button>
              <input type="hidden" id="printSrc2" value="" />
						</div>

          </div>		

			</div>

			<div class="recommendedWalks">
             <h4 style="margin-top:10px;margin-left:10px;margin-bottom:10px;color:#242424;">Recommended Walks</h4>
				<div class="recommendedWalkImages">
					<div>
						<a class="prevPage browse left">Prev</a>
						<div id="scrollable3" class="scrollable">	
                            <div id="recommendedPhotos" class="items"></div>
						    </div>
						<!-- "next page" action -->
						<a class="nextPage browse right">Next</a>
					</div>
				</div>
      </div>
		</div>	
	</div>
	<input type="hidden" id="userID" value="<?php echo $userId; ?>" />
</body>
<!-- Facebook -->
<script type="text/javascript">
        FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("c55d6c8c312ca6c555b1003c8338bbb2", "xd_receiver.htm"); });
</script>
<!-- /Facebook -->
</html>
